import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import { Dropdown, Space, Button, Card, Row, Col, Modal } from 'antd';
import FormSet from './components/FormSet';
import './index.less'
const AnswerQaAmountSetting = (props) => {
    const { userList, loading, dispatch } = props;
    const [visible, setVisible] = useState(false);
    const [list, setList] = useState([])
    const childRef = useRef();

    const btnExtra = [
        {
            text: '新增',
            onClick: () => {
                setVisible({
                    show: true
                })
            }
        }
    ]
    useEffect(() => {
        fetchData()
    }, [])
    const fetchData = () => {
        dispatch({
            type: 'answering/fetchListUserQaAmountPriceConfig',
            callback: (e) => {
                const { qaAmountPriceConfigList = [] } = e
                setList(qaAmountPriceConfigList)
            }
        })
    }

    return (
        <div>
            <Card
                title='答疑次数配置'
            >
                <Row gutter={[24, 24]}>
                    <Col span={24}>
                        <Button onClick={() => {
                            setVisible({
                                show: true, detail: {
                                    stockShowFlag: true,
                                    showPriceFlag: true
                                }
                            })
                        }} type='"primary'>+新增</Button>
                    </Col>

                    {list.map(val => {
                        const { amount, price, tag, stockShowFlag, showPriceFlag, id, oriPrice, stock, buyLimit, expiredDays } = val
                        return <Col span={6}>
                            <Card style={{ width: '100%', }}>
                                <Row gutter={[24, 24]}>
                                    <Col span={24}>
                                        <div className='AnswerQaAmountSetting_top'>
                                            <div className='AnswerQaAmountSetting_left'>
                                                <div className='AnswerQaAmountSetting_left_1'>{amount}</div>
                                                <div className='AnswerQaAmountSetting_left_2'>次</div>
                                            </div>
                                            <div className='AnswerQaAmountSetting_right'>
                                                {tag}
                                            </div>
                                        </div>
                                    </Col>

                                    <Col span={24}>
                                        <div className='AnswerQaAmountSetting_bottom'>
                                            现价¥{price} <span style={{ color: '#999999', fontSize: 18 }}>  原价¥{oriPrice}</span>
                                        </div>
                                        <div className='AnswerQaAmountSetting_desc'>
                                            有效期：{expiredDays}天；
                                        </div>
                                        <div className='AnswerQaAmountSetting_desc'>
                                            用户限购 {buyLimit ? `${buyLimit}/次` : '不限购'};
                                        </div>
                                        <div className='AnswerQaAmountSetting_desc'>
                                            平台限购{stock ? `${stock}/次` : '不限购'};
                                        </div>
                                    </Col>
                                    <Col span={24}>
                                        <Space>
                                            <Button onClick={() => {
                                                setVisible({
                                                    show: true, detail: {
                                                        ...val,
                                                        stockShowFlag: stockShowFlag === '1' ? true : false,
                                                        showPriceFlag: showPriceFlag === '1' ? true : false
                                                    }
                                                })
                                            }} type='primary'>编辑</Button>
                                            <Button onClick={() => {
                                                Modal.confirm({
                                                    title: '确认删除',
                                                    content: '是否确认删除答疑次数',
                                                    okText: '删除',
                                                    onOk() {
                                                        dispatch({
                                                            type: 'answering/fakeRemoveUserQaAmountPriceConfig',
                                                            payload: {
                                                                id
                                                            }, callback: () => {
                                                                fetchData()
                                                            }
                                                        })
                                                    },
                                                    onCancel() {
                                                        console.log('Cancel');
                                                    },
                                                })

                                            }} danger type='primary'>删除</Button>
                                        </Space>

                                    </Col>
                                </Row>

                            </Card>
                        </Col>
                    })}
                </Row>
            </Card>
            <FormSet fetchData={fetchData} visible={visible} onClose={() => { setVisible(false) }}></FormSet>
        </div>



    );
};
export default connect(({ loading }) => ({
    loading: loading.models.answering
}))(AnswerQaAmountSetting);
